<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>后台登录</title>
    <link rel="shortcut icon" href="img/logo-title.png">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login.css" />
    <script src="js/jquery.min.js"></script>
    <style>
        .toFront{
            text-decoration: none;
            transition: scale .8s;
            transform: scale(1);
        }
        .toFront:hover{
            color: #FFF;
            text-decoration: none;
            transform: scale(1.1);
        }
    </style>
</head>
<body>
<div class="login" style="margin-top: 0;background-image: url(../img/about-bg.jpg);
    background-repeat: no-repeat;
    background-size:125% 100%;
    background-position: right;" >
    <p> 永不畏惧创新，紧跟时代步伐，用心培育每一位学员。</p>
    <h3 class="title" style="margin-top: 70px;">后台登录</h3>
    <div class="box">
        <div class="box-small">
            <div class="brand-text brand-big hidden-lg-down" ><img style="width: 300px;height: 51px" src="img/logo.png" alt="Logo" class="logo-img"></div>
            <form  style="margin-top: 35px" action="/loginServlet" method="post" accept-charset="UTF-8">
                <div class="form-group">
                    <input type="text" id="user-name" name="user_name"  class="form-control" placeholder=" 用户名"/>
                    <div class="showsIcon" style="background-image: url(img/user.png);top: 5.5px;"></div>
                </div>
                <div class="form-group" style="margin-bottom: 6px">
                    <input type="password" id="user-password" name="password" class="form-control" placeholder=" 密码"/>
                    <div class="showsIcon" style="background-image: url(img/pwd.png);width: 28px;height: 28px;left: 3px;"></div>
                </div>
                <span id="repasser" style="margin-top: 2px"> </span>
                <div class="form-group" style="margin-top: 15px;">
                    <input class="captcha_input" id="coder" type="text" name="captcha" placeholder="请输入图片中的验证码" style="margin-right: 23px;">
                    <img id="captcha" src="/codeServlet"  onclick="this.src='/codeServlet?'+new Date().getTime();" width="100" height="40"><br/>
                    <span id="cod"> </span>
                </div>
                <span id="repasser2" > </span>
                <div class="form-group">
                    <button type="submit" id="btn-submit" onclick="return go()" class="btn btn-primary btn-block">登录</button>
                </div>
            </form>
        </div>
        <div class="box-bottom">
            <p style="text-align: center;line-height: 40px;"><a href="../index.jsp" class="toFront">返回前端</a></p>
        </div>
    </div>
</div>

</body>
</html>
<script type="text/javascript">
    $(document).ready(function(){
        $("#user-password").blur(function () {
            var user_name= $("#user-name").val();
            var password = $("#user-password").val();
            var param = {
                user_name:user_name,
                password: password,
            };
            $.get("/checkServlet",param,function (data) {
                var f = data.flag;
                if(f==1){
                    $("#repasser").html("");
                }
                else if(f==2){
                    $("#repasser").html("密码错误,请重新输入！");
                }
                else{
                    $("#repasser").html("用户名不存在,请重新输入！");
                }
            });
        });
        $("#coder").blur(function () {
            var cod=$("#coder").val();
            if(cod!=""){
                var param2 = {
                    cod:cod,
                };
                $.get("/checkcodeServlet",param2,function (data) {
                    var f=data.flag;
                    if(f==1){
                        alert("验证码错误！");
                        $(".captcha_input").val("");
                        $("#captcha").attr("src","/codeServlet?"+new Date().getTime());
                    }
                });
            }
        });
        $("form").submit(function(e){
            var cod=$("#coder").val();
            if(cod!=""){
                var param2 = {
                    cod:cod,
                };
                $.get("/checkcodeServlet",param2,function (data) {
                    var f=data.flag;
                    if(f==1){
                        e.preventDefault();
                        alert("验证码错误！");
                        $(".captcha_input").val("");
                        $("#captcha").attr("src","/codeServlet?"+new Date().getTime());
                    }
                });
            }else {
                e.preventDefault();
                alert("验证码不能为空！");
            }

        });
    });
</script>